<script setup lang="ts">
import { useMap } from "@/views/pipe-network/components/Map/index.vue";
import { ref } from "vue";
import { LMarker } from "@vue-leaflet/vue-leaflet";
import { useMapStore } from "@/store";

const mapStore = useMapStore();
const { addedPipePoint } = storeToRefs(mapStore);
const map = useMap();
const onMapClick = (e: any) => {
  mapStore.setAddedPipePoint(e.latlng);
};

onMounted(() => {
  map.on("click", onMapClick);
});
onUnmounted(() => {
  map.off("click", onMapClick);
  mapStore.setAddedPipePoint(null);
});
</script>

<template>
  <LMarker v-if="addedPipePoint" :latLng="addedPipePoint" />
</template>

<style scoped lang="scss"></style>
